/**
 * 允许定义一组基于 immer draft 的模型，支持同步异步修改
 * 完全使用纯数据表示状态
 * 使用 action 来提供更新事务和动作跟踪
 */
import React from 'react';
import useDraft from '@/hooks/useDraft';

import styles from './try_vue3_immer.css';

// function useDraftModel(initState: any, methods: Function[]) {

// }

// 如何定义一个 model
function useDraftModel1(init: any) {
  const [draft, setDraft] = useDraft(init);
  function increaseA() {
    setDraft((v: any) => {
      v.a++;
    });
  }
  function increaseB() {
    setDraft((v: any) => {
      v.b++;
    });
  }
  return [draft, { increaseA, increaseB }];
}

// function doWithDraft<type> = (draft) => (params) = {}

export default function() {
  const [m1, m] = useDraftModel1(() => ({ a: 1, b: 2 }));
  return (
    <div className={styles.normal}>
      <h1>Page try_vue3_immer</h1>
      <button onClick={m.increaseA}>increaseA</button>
      <button onClick={m.increaseB}>increaseB</button>
      <pre>{JSON.stringify(m1, null, 2)}</pre>
    </div>
  );
}
